<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #fff;
		}
		.bufBox{
			float: left;
			width: 50px;
			height: 50px;
			background: #ddd;
			border-radius: 5px;
			text-align: center;
			line-height: 50px;
			margin: 0 5px;
			position:relative;
			overflow: hidden;
		}
		.bufCover{
			width: 100%;
			height: 0;
			background: #f0f;
			border-radius: 5px;
			position: absolute;
		}
		#buf{
			height: 60px;
		}
		#des p{
			padding: 4px 0;
			margin: 0;
			font-size: 14px;
		}
		#des .desPro{
			color: #333;
			background: #EEE;
		}
		#des .desCon{
			color: #EEE;
			background: #333;
		}
		#des .desSpe{
			background: #BBB;
		}
	</style>
	<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
	<button id="produce">生产</button>
	<button id="consume">消费</button>
	<div id="buf">
	</div>
	<div id="des"><p></p></div>
	<script type="text/javascript" src="pro-con.js"></script>
</body>
</html>